import { getSimilarList, getSubjectInfo } from "@/api/subject";
import { NullAble } from "@pangza-club/utils/types";
import { Button, Card, Col, Menu, Row, Spin, Tag, Typography } from "antd";
import { useEffect, useState } from "react";
import { Link, useNavigate, useParams } from "react-router-dom";
import 'md-editor-rt/lib/style.css';
import { MdPreview } from "md-editor-rt";
import { EyeInvisibleOutlined, EyeOutlined, HeartOutlined, StarOutlined, TagOutlined } from "@ant-design/icons";
import MenuItem from "antd/es/menu/MenuItem";

const SubjectInfo = () => {
    const params = useParams();
    const nav = useNavigate();
    const [subjectInfo, setSubjectInfo] = useState<NullAble<SubjectVO>>(null);
    const [loading, setLoading] = useState(false);
    const [answerVisible, setAnswerVisible] = useState(false);
    const [similarList, setSimilarList] = useState<SubjectVO[]>([]);
    useEffect(() => {
        if (!params.id) {
            nav('/404')
        }
    }, [])

    useEffect(() => {
        initSubject()
    }, [params.id])

    function initSubject() {
        setLoading(true);
        getSubjectInfo(params.id as unknown as number).then(res => {
            setSubjectInfo(res);
        }).finally(() => {
            setLoading(false);
        });

        getSimilarList(params.id as unknown as number).then(res => {
            setSimilarList(res);
        })
    }

    return <Row>
        <Col span={2}>
        </Col>
        <Col span={14}>
            <Spin spinning={loading}>
                <Card actions={[<div><HeartOutlined />点赞</div>, <div><StarOutlined />收藏</div>, <div><TagOutlined />标记</div>]}>
                    <Typography.Title level={3}>{subjectInfo?.id}. {subjectInfo?.subjectName}</Typography.Title>
                    {subjectInfo?.categoryList.map(item => <Link key={item.id} to={`/label-subject/${item.id}/category`} target="__blank"><Tag>{item.categoryName}</Tag></Link>)}
                    {subjectInfo?.labelList.map(item => <Link key={item.id} to={`/label-subject/${item.id}/label`} target="__blank"><Tag>{item.labelName}</Tag></Link>)}
                </Card>
                <Card style={{ marginTop: 24 }} tabList={[{ label: '推荐答案', key: '1' }]} className="mt-4" tabBarExtraContent={<Button onClick={() => setAnswerVisible(!answerVisible)} icon={!answerVisible ? <EyeInvisibleOutlined /> : <EyeOutlined />} type="text">{!answerVisible ? '隐藏答案' : '显示答案'}</Button>}>
                    {
                        !answerVisible ? <MdPreview previewTheme="github" value={subjectInfo?.subjectAnswer} /> :
                            <div className=" flex justify-center">
                                <div className="flex flex-col justify-center items-center">
                                    <EyeInvisibleOutlined style={{ fontSize: '56px', color: "#ccc" }} />
                                    <div className="mt-2 text-lg text-[#ccc] mb-4">
                                        答案已隐藏
                                    </div>

                                    <Button onClick={() => setAnswerVisible(false)} type="primary">显示答案</Button>
                                </div>
                            </div>
                    }
                </Card>

                <Card style={{ marginTop: 24 }}>
                    <div className="flex justify-between">
                        {
                            subjectInfo?.preSubjectInfoVO ? <Link to={`/subject-info/${subjectInfo.preSubjectInfoVO.id}`}>
                                上一题：{subjectInfo.preSubjectInfoVO.subjectName}
                            </Link>:
                            <div>已经是第一题啦</div>
                        }

                        {
                            subjectInfo?.nextSubjectInfoVO ? <Link to={`/subject-info/${subjectInfo.nextSubjectInfoVO.id}`}>
                                下一题：{subjectInfo.nextSubjectInfoVO.subjectName}
                            </Link>:
                            <div>已经是最后一题啦</div>
                        }
                    </div>
                </Card>
            </Spin>
        </Col>
        <Col offset={1} span={5}>
            <Card>
                <div>
                    相关推荐
                </div>

                <div>
                    <Menu selectedKeys={[params.id as unknown as string]}>
                        {
                            similarList.map(item => <MenuItem onClick={() => nav('/subject-info/' + item.id)} key={item.id}>{item.subjectName}</MenuItem>)
                        }
                    </Menu>
                </div>
            </Card>
        </Col>
        <Col span={2}>
        </Col>
    </Row>
}

export default SubjectInfo;